//table选项卡
(function(){
	var lis = document.querySelectorAll("li");
	var con = document.querySelectorAll(".con");
	//遍历
	for(let i=0;i<lis.length;i++){
		lis[i].addEventListener("click",function(){
			console.log(i);
			for(let j=0;j<lis.length;j++){
				lis[j].classList.remove("select");
				con[j].classList.remove("show");
			}
			lis[i].classList.add("select");
			con[i].classList.add("show");
		})
	}
})();
//end

//AJAX
(function(){
var xhr = new XMLHttpRequest();
xhr.addEventListener("readystatechange",function(e){
	if(xhr.readyState ==4 && e.target.status == 200){
		renderData(e.target.response);
	}
});
xhr.open("GET","https://www.easy-mock.com/mock/5bad9911cc76e634e0ab9e28/xyfs/commodity");
xhr.send();
function renderData(responce){
	var groundingContent = document.querySelector(".grounding-content");
	var undercarriageContent = document.querySelector(".undercarriage-content");
	var dataObj = JSON.parse(responce);
	var template = function(commodityTitle,money,profit,stock){
		return `
				<div class="red-c flex"><i class="icon-gouxuanzhong iconfont"></i></div>
				<div class="commodity-left flex">
					<img src="img/food-1_03.png"/>
				</div>
				
				<div class="commodity-right flex">
					<p class="commodity-title">${commodityTitle}</p>
					<div class="num"><span>库存: ${money}+件</span><span> 利润: ￥${profit}/件</span></div>
					<div class="price flex"><p><span>售价:</span><span class="money">￥${stock}</span></p><i class="icon-more showMore iconfont"></i></div>
				</div>
				<ul class="more flex">
					<li class="flex"><i class="icon-bianji iconfont"></i>编辑</li>
					<li class="flex"><i class="icon-xiajia iconfont"></i>下架</li>
					<li class="flex"><i class="icon-shangchuan iconfont"></i>删除</li>
					<li class="flex"><i class="icon-tuiguang iconfont"></i>推广</li>
					<li class="flex"><i class="icon-zhiding iconfont"></i>置顶</li>
					<!--三角形-->
					<div class="sjx"></div>
				</ul>		
		`
	};
	dataObj.grounding.forEach(function(el,index){
		var son = document.createElement("div");
		son.classList.add("commodity");
		son.classList.add("flex");
		son.innerHTML=template(el.commodityTitle,el.money,el.money,el.profit,el.stock);
		groundingContent.appendChild(son);
	});
	//菜单数量显示
	var grounding = document.querySelector(".grounding");
	grounding.innerText="上架商品("+dataObj.grounding.length+")"; 	
	var undercarriage = document.querySelector(".undercarriage");
	undercarriage.innerText="上架商品("+dataObj.undercarriage.length+")"; 	
	//下架AJAX
	var template1 = function(commodityTitle,money,profit,stock){
		return `
		<div class="red-c flex"><i class="icon-gouxuanzhong iconfont"></i></div>
				<div class="commodity-left flex">
					<img src="img/food-2_03.png"/>
				</div>
				
				<div class="commodity-right flex">
					<p class="commodity-title">${commodityTitle}</p>
					<div class="num"><span>库存: ${money}+件</span><span> 利润: ￥${profit}/件</span></div>
					<div class="price flex"><p><span>售价:</span><span class="money">￥${stock}</span></p><i class="icon-more showMore iconfont"></i></div>
				</div>
				<ul class="more flex">
					<li class="flex"><i class="icon-bianji iconfont"></i>编辑</li>
					<li class="flex"><i class="icon-xiajia iconfont"></i>下架</li>
					<li class="flex"><i class="icon-shangchuan iconfont"></i>删除</li>
					<li class="flex"><i class="icon-tuiguang iconfont"></i>推广</li>
					<li class="flex"><i class="icon-zhiding iconfont"></i>置顶</li>
					<!--三角形-->
					<div class="sjx"></div>
				</ul>		
		`
	};
	dataObj.undercarriage.forEach(function(el,index){
		var son1 = document.createElement("div");
		son1.classList.add("commodity");
		son1.classList.add("flex");
		son1.innerHTML=template1(el.commodityTitle,el.money,el.money,el.profit,el.stock);
		undercarriageContent.appendChild(son1);
	});
};
})();

//批量管理按钮JS
(function(){
	var bottomRight = document.querySelector(".bottom-right");
	var	iconCx = document.querySelector(".icon-cx");
	var	batchMenu = document.querySelector(".batchMenu");
	var	bottomMenu = document.querySelector(".bottom-menu");
	var groundingContent = document.querySelector(".grounding-content");
	//批量管理按钮
	bottomRight.addEventListener("click",function(){
		var redC = document.querySelectorAll(".red-c");
		function bAndN(a,b,c){
			a.style.display="none";
			b.style.display="block";
			c.style.display="flex";
		}
		bAndN(iconCx,finish,batchMenu);
		bottomMenu.style.display="none";
		for(let n=0;n<redC.length;n++){
			redC[n].style.display="flex";
		}
	});
	//完成按钮
	var	finish = document.querySelector(".finish");
	finish.addEventListener("click",function(){
		var redC = document.querySelectorAll(".red-c");
		function finishN(d,e,f){
			d.style.display="none";
			e.style.display="block";
			f.style.display="flex";
		}
		finishN(batchMenu,iconCx,bottomMenu);
		finish.style.display="none";
		for(let n=0;n<redC.length;n++){
			redC[n].style.display="none";
		}
	});
	//全选
	var all = document.querySelector(".all");
	var icg =  document.querySelector(".icg");
	all.addEventListener("click",function(){
//		debugger
		var redC = document.querySelectorAll(".red-c");
		var del = document.querySelector(".del");
		console.log("击中全选按钮");
		if(icg.classList.contains("xz")){
			icg.classList.remove("xz");
			for(let q=0;q<redC.length;q++){
			redC[q].classList.remove("xz");
		};
		}else{
			icg.classList.add("xz");
			for(let q=0;q<redC.length;q++){
				redC[q].classList.add("xz");
			};
		};
		console.log();
		for(let h=0;h<redC.length;h++){
//			console.log(redC[h].classList);
			if(redC[h].classList.contains("xz")){
				del.addEventListener("click",function(){
					groundingContent.remove(groundingContent.childNodes);
				})
			}
		}
	});
	//单个选中-
	groundingContent.addEventListener("click",function(e){
		var redC = document.querySelectorAll(".red-c");
		console.log(e.target.nodeName);
		var bb = e.target.parentNode;
//		debugger
		console.log(bb.classList.contains("xz"));
		//点击I时候，判断是否有红色类，如果无就加，有就移除
		if(e.target.nodeName == "I"){
				if(!bb.classList.contains("xz")){
				bb.classList.add("xz");
			}else{
				bb.classList.remove("xz");
			}
		};
		//单个选中删除
		var del = document.querySelector(".del");
		console.log(redC.length);
//		debugger
		for(let r=0;r<redC.length;r++){
//			console.log(redC[r].classList);
			if(redC[r].classList.contains("xz")){
				console.log(redC[r].parentNode);
				del.addEventListener("click",function(){
					groundingContent.removeChild(redC[r].parentNode);
				})
			}
		}
		//点击显示更多功能
		var more = document.querySelector(".more");
		var pdsm = e.target.parentNode.parentNode.nextElementSibling;
		console.log(pdsm);
//		debugger
		if(e.target.nodeName == "I" && e.target.className == "icon-more showMore iconfont"){
			console.log("yes");
			console.log(more.classList);
			if(pdsm.classList.contains("scl")){
				more.classList.remove("scl");
			}else{
				more.classList.add("scl");
			}
		}	
	});
	
})();

